<script setup>
import { useRoute, useRouter } from 'vue-router';
import { ref } from 'vue'
const statel = ref(true)
// console.log(statel.value);
const router = useRouter()
function onClickLeft() {
    router.back()
}

function change1() {
    statel.value = true
}
function change2() {
    statel.value = false
}
</script>

<template>
    <div class="box">
        <van-nav-bar title="二维码" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="content">
            <div class="top">
                <h2 v-if="statel">付款码</h2>
                <h2 v-else>交友码</h2>
                <p v-if="statel">向商家展示该码，以便支付</p>
                <p v-else>扫一扫二维码，添加更多好友</p>
            </div>
            <div v-if="statel" class="top1"></div>
            <div v-else class="top2"></div>

            <div class="top3">
                <van-button type="success" @click="change1">支付码</van-button><van-button type="warning"
                    @click="change2">交友码</van-button>
            </div>
        </div>
    </div>
</template>

<style scoped>
.top {
    width: 100%;
    height: 1rem;
    line-height: .5rem;
    text-align: center;
    margin-top: .5rem;
    margin-bottom: .3rem;
}

.top1 {
    width: 80%;
    height: 2.5rem;
    background: url(https://img2.baidu.com/it/u=1793708568,476376385&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500) no-repeat 100%/cover;
    margin-left: .38rem;
    border-radius: .2rem;
    margin-bottom: .8rem;

}

.top2 {
    width: 80%;
    height: 2.5rem;
    background: url(https://img0.baidu.com/it/u=1698759226,4417076&fm=253&fmt=auto&app=120&f=JPEG?w=511&h=500) no-repeat 100%/cover;
    margin-left: .38rem;
    border-radius: .2rem;
    margin-bottom: .8rem;
}

.top3 {
    width: 100%;
    text-align: center;
    background-color: aliceblue;
}

.van-button {
    width: 50%;
}
</style>

